<template>
  <el-container id="back">
    <!-- 头部 -->
    <el-header>
      <el-menu 
        :default-active="activePath" 
        class="el-menu-demo" 
        mode="horizontal" 
        router
        >
        <el-menu-item index="/admin">数据管理</el-menu-item>
        <el-menu-item index="/write">我的创作中心</el-menu-item >
        <el-button class="btn" type="info" plain @click="handleOut">退出</el-button>
      </el-menu>
    </el-header>
    <!--主体内容-->
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</template>

<script>
  export default{
    data() {
      return {
        activePath:'admin'
      };
    },
    mounted(){
      this.activePath = this.$route.path.slice(1)
    },
    methods: {
      //点击退出登录按钮
      handleOut(){
        //清除sessionStroage
        window.sessionStorage.clear();
        //跳转到登录页面
        this.$router.replace('/home')
      }
    }
  }
</script>

<style scoped>
  #back{
    height:100%;
    width:100%;
    z-index:1;
  }
  .btn{
    float:right;
    margin-right:30px;
    margin-top:10px;
  } 
  .el-header{
    z-index:1;
  }
  .el-main{
    z-index:1;
  }
</style>
